import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:xin_he/page/goods/xin_he_flash_sale_goods_detail/XinHeFlashSaleMakeGroupModel.dart';
import 'package:xin_he/page/home/xin_he_group_purchase/xin_he_group_purchase_alert/xin_he_group_purchase_alert_view.dart';

import '../../../routes/xin_he_routes.dart';
import '../../../utils/xh_styles.dart';
import '../../../utils/xin_he_image.dart';
import '../../../utils/xin_he_toast.dart';
import 'xin_he_group_purchase_goods_detail_logic.dart';

class XinHeGroupPurchaseGoodsDetailPage extends StatelessWidget {
  XinHeGroupPurchaseGoodsDetailPage({Key? key}) : super(key: key);

  final logic = Get.put(XinHeGroupPurchaseGoodsDetailLogic());
  final state = Get.find<XinHeGroupPurchaseGoodsDetailLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(children: [
        Stack(children: [
          ListView(
            padding: EdgeInsets.zero,
            children: [

              ///图片banner
              Listener(
                onPointerDown: logic.getPointDownListenerInHorizontal(),
                onPointerUp: logic.getPointUpListenerInHorizontal(),
                child: SizedBox(
                  height: 300,
                  width: Get.width,
                  child: ListView.builder(
                      padding: EdgeInsets.zero,
                      itemCount: state.images.length,
                      scrollDirection: Axis.horizontal,
                      controller: logic.scrollController,
                      itemBuilder: (ctx,index){
                        return GestureDetector(
                          onTap: ()async{

                            Map map = {'images':state.images.value,'index':index};
                            String json = jsonEncode(map);
                            Get.toNamed(XinHeRoutes.goodsDetailBannerScan,arguments: logic.test,parameters:{'data':json});

                            // await Navigator.of(context).push(XinHeFadeRoute(page: XinHePhotoGalleryScanPage(imagesList: state.images.value,currentIndex: index,))).then((value) => {})
                                ;
                          },
                          child: Container(
                            color: Colors.white,
                            width: Get.width,
                            height: 300,
                            child: XinHeAssetImage('assets/images/adopt/bg_${index+1}.png',fit: BoxFit.contain,),
                          ),
                        );
                      }
                  ),),
              ),


              Container(
                margin: const EdgeInsets.symmetric(horizontal: 15,vertical: 15),
                padding: const EdgeInsets.symmetric(horizontal: 15,vertical: 0),
                decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(10)),
                child:  Row(
                  mainAxisSize: MainAxisSize.max,
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    Expanded(
                      child: Padding(
                        padding: EdgeInsets.only(right: 15),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            SizedBox(height: 10,),
                            Text('绿色食品认证纯山茶油250ML压 榨一级食用油茶籽油',maxLines: 2,style: TextStyle(color: XinHeColor('#2B3131'),fontSize: 17,fontWeight: FontWeight.w600),softWrap: true,),
                            SizedBox(height: 10,),
                            RichText(
                                text: TextSpan(children: [
                                  ///￥
                                  TextSpan(
                                    text: '￥',
                                    style: TextStyle(
                                      color: XinHeColor('#E84128'),
                                      fontSize: 9,
                                      fontWeight: FontWeight.w500,
                                    ),
                                  ),

                                  ///
                                  TextSpan(
                                    text: '28.83',
                                    style: TextStyle(
                                      color: XinHeColor('#E84128'),
                                      fontSize: 16,
                                      fontWeight: FontWeight.w500,
                                    ),
                                  ),

                                ]
                                )),
                            SizedBox(height: 15,)


                          ],),
                      ),
                    ),
                    SizedBox(
                      width: 30,
                      child: Column(
                        children: [
                          const XinHeAssetImage('assets/images/home/favor.png',width: 18,height: 18,),
                          Text('收藏',style: TextStyle(color: XinHeColor('#A8B0B0'),fontSize: 11),)
                        ],
                      ),
                    ),
                    SizedBox(width: 15,),
                    SizedBox(
                      width: 30,
                      child: Column(
                        children: [
                          const XinHeAssetImage('assets/images/home/share.png',width: 18,height: 18,),
                          Text('分享',style: TextStyle(color: XinHeColor('#A8B0B0'),fontSize: 11),)
                        ],
                      ),
                    ),


                  ],),
              ),


              ///3人正在拼团
              Container(
                height: 41,
                width: Get.width,
                color: Colors.white,
                padding: EdgeInsets.symmetric(horizontal: 15),
                child: Row(children: [
                  Text('3人正在拼团',style: TextStyle(color: XinHeColor('#333333'),fontSize: 14,fontWeight: FontWeight.w500),),

                  Spacer(),
                  Text('查看更多',style: TextStyle(color: XinHeColor('#888888'),fontSize: 12,fontWeight: FontWeight.w500),),
                  const XinHeAssetImage('assets/images/mine/mine_arrow.png',width: 6,height: 10,)

                ],),
              ),
              /// 拼团列表
              Obx(() => SizedBox(
                height: 57*3,
                width: Get.width,
                child: ListView.builder(
                    physics: NeverScrollableScrollPhysics(),
                    padding: EdgeInsets.zero,
                    itemCount: state.makeGroupList.length,
                    itemBuilder: (ctx,index){
                      XinHeFlashSaleMakeGroupModel model = state.makeGroupList[index];
                      return  _groupItemView(model);
                    }),
              )),

              ///拼团流程
              Container(
                width: Get.width,
                color: Colors.white,
                margin: EdgeInsets.only(top: 10,bottom: 10),
                padding: EdgeInsets.symmetric(horizontal: 15),
                child: Column(children: [
                  Container(
                    height: 48,
                    alignment: Alignment.centerLeft,
                    child: Text('拼团流程',style: TextStyle(color: XinHeColor('#333333'),fontSize: 14,fontWeight: FontWeight.w500),),
                  ),
                  
                  
                  XinHeAssetImage('assets/images/home/group_progress.png',width: Get.width-30,height: 55/345*(Get.width-30),),

                  const SizedBox(height: 22,)
                  
                  

                ],),),



              Container(
                  margin: const EdgeInsets.only(left: 15,right: 15,top: 15),
                  child: XinHeAssetImage('assets/images/adopt/bg_1.png',width: Get.width-30,fit: BoxFit.fitWidth,)
              ),
              Container(
                  margin: const EdgeInsets.symmetric(horizontal: 15,vertical: 0),
                  child: XinHeAssetImage('assets/images/adopt/bg_2.png',width: Get.width-30,fit: BoxFit.fitWidth,)
              ),
              Container(
                  margin:  EdgeInsets.only(left: 15,right: 15,bottom: 15+60+Get.mediaQuery.padding.bottom),
                  child: XinHeAssetImage('assets/images/adopt/bg_3.png',width: Get.width-30,fit: BoxFit.fitWidth,)
              ),

            ],),
        ],),

        ///顶部bar
        Positioned(
          left: 10,
          top: Get.mediaQuery.padding.top,
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 5),
            child: GestureDetector(
              onTap: (){
                Get.back();
              },
              child: Container(
                height: 44,
                width: 40,
                color: Colors.transparent,
                alignment: Alignment.centerLeft,
                child: XinHeAssetImage(
                  'assets/images/home/app_back_3.png',
                  width: 9.5,
                  height: 17,
                  fit: BoxFit.cover,),
              ),
            ),
          ),
        ),

        ///底部bar
        Positioned(
            bottom: 0,
            left: 0,
            right: 0,
            child: Container(
              height: 60+Get.mediaQuery.padding.bottom,
              padding: EdgeInsets.symmetric(horizontal: 15),
              color: Colors.white,
              alignment: Alignment.center,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  SizedBox(
                    height: 60,
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        GestureDetector(
                          onTap: (){
                            Get.toNamed(XinHeRoutes.sellerShop);
                          },
                          child: Center(
                            child: Column( mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                const XinHeAssetImage('assets/images/home/shop_icon.png',width: 26,height: 26,),
                                const SizedBox(height: 2,),
                                Text('店铺',style: TextStyle(color: XinHeColor('#2B3131'),fontSize: 12,fontWeight: FontWeight.w500),)
                              ],),
                          ),
                        ),
                        const SizedBox(width: 25,),
                        GestureDetector(
                          onTap: (){
                            XinHeToast.center('正在开发，敬请期待');
                          },
                          child: Container(
                            color: Colors.transparent,
                            child: Column(mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                const XinHeAssetImage('assets/images/home/service_icon.png',width: 26,height: 26,),
                                const SizedBox(height: 2,),
                                Text('客服',style: TextStyle(color: XinHeColor('#2B3131'),fontSize: 12,fontWeight: FontWeight.w500),)
                              ],),
                          ),
                        ),
                        const Spacer(),

                        GestureDetector(
                          onTap: (){
                            Get.dialog(XinHeGroupPurchaseAlertPage());
                          },
                          child: Container(
                            padding: const EdgeInsets.symmetric(horizontal: 15),
                            alignment: Alignment.center,
                            height: 42,
                            width: 244,
                            decoration:  BoxDecoration(
                              // color: Colors.white,
                              gradient: LinearGradient(colors: [XinHeColor('#F89A30'),XinHeColor('#E84128')]),
                              border: Border.all(color: XinHeColor('#FF892F'),width: 0.5),
                              borderRadius:  BorderRadius.circular(21),
                            ),
                            child: Text('发起拼团',style: TextStyle(color: Colors.white,fontWeight: FontWeight.w600,fontSize: 17),strutStyle: StrutStyle(forceStrutHeight: true),),

                          ),
                        ),

                      ],
                    ),
                  ),
                ],),

            ))

      ],),
    );
  }
  
  ///拼团item
  Widget _groupItemView(XinHeFlashSaleMakeGroupModel model) {
    return Container(
      width: Get.width,
      height: 57,
      color: Colors.white,
      child: Column(children: [

        Container(width: Get.width-15,height: 0.5,color: XinHeStyle.lineColor,),
        SizedBox(
          height: 56.5,
          width: Get.width-30,
          child: Row(children: [

            const XinHeAssetImage('assets/images/mine/default_avatar.png',width: 34,height: 34,),
            SizedBox(width: 10,),
            Expanded(child: Text('用户昵称',style: TextStyle(color: XinHeColor('#333333'),fontSize: 13,fontWeight: FontWeight.w500),)),
            SizedBox(width: 10,),
            Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
              RichText(
                  text: TextSpan(children: [

                    TextSpan(
                      text: '3',
                      style: TextStyle(
                        color: XinHeColor('#E33F3F'),
                        fontSize: 13,
                        fontWeight: FontWeight.w500,
                      ),
                    ),


                    TextSpan(
                      text: '人团还差',
                      style: TextStyle(
                        color: XinHeColor('#333333'),
                        fontSize: 13,
                        fontWeight: FontWeight.w500,
                      ),
                    ),
                    TextSpan(
                      text: '1',
                      style: TextStyle(
                        color: XinHeColor('#E33F3F'),
                        fontSize: 13,
                        fontWeight: FontWeight.w500,
                      ),
                    ),
                    TextSpan(
                      text: '人拼成',
                      style: TextStyle(
                        color: XinHeColor('#333333'),
                        fontSize: 13,
                        fontWeight: FontWeight.w500,
                      ),
                    ),

                  ]
                  )),

              RichText(
                  text: TextSpan(children: [

                    TextSpan(
                      text: '剩余 ',
                      style: TextStyle(
                        color: XinHeColor('#999999'),
                        fontSize: 11,
                        fontWeight: FontWeight.w500,
                      ),
                    ),


                    TextSpan(
                      text: '${model.hour}：${model.min}：${model.sec}',
                      style: TextStyle(
                        color: XinHeColor('#F62829'),
                        fontSize: 11,
                        fontWeight: FontWeight.w500,
                      ),
                    ),


                  ]
                  )),


            ],),
            SizedBox(width: 30,),
            Container(
              height: 26,
              width: 59,
              alignment: Alignment.center,
              decoration: BoxDecoration(color: XinHeColor('#30E9E9'),borderRadius: BorderRadius.circular(13) ),
              child: const Text('去拼团',style: TextStyle(color: Colors.white,fontSize:12 ),),)

          ],),
        )
      ],),
    );
  }
}
